<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.content{
				position: relative;
				width: 800px;
				margin:0 auto;
				height:800px;
				text-align: center;
			}
			.pifu{
				position:absolute;
				width: 100%;
				
			
			}
			.title{
				background-color: #888888;
			}
			li{
				float: left;
				list-style: none;
				cursor: pointer;
				margin-left: 9%;
			}
			.big_box{
				position: relative;
				top:20%;
				width: 60%;
				margin: 0 auto;
			}
			.selected{
				background: coral;
			}
			*{
    margin:0px;
    padding:0px;
}
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
#div_side_0,#div_side_1
{
    float:left;
    width:120px;
    height:450px;
    }
#skin
{
    margin:10px;
    padding:5px;
	width:210px;
    padding-right:0px;
	list-style:none;
    border: 1px solid #CCCCCC;
	overflow:hidden;
    }
#skin li{
	float:left;
    margin-right:5px;
    width:15px;
    height:15px;
	text-indent:-999px;
	overflow:hidden;
	display:block;
	cursor:pointer;
	background-image:url(theme.gif);
}
#skin_0{
	background-position:0px 0px;
}
#skin_1{
	background-position:15px 0px;
}
#skin_2{
	background-position:35px 0px;
}
#skin_3{
	background-position:55px 0px;
}
#skin_4{
	background-position:75px 0px;
}
#skin_5{
	background-position:95px 0px;
}
#skin_0.selected{
	background-position:0px 15px !important;
}
#skin_1.selected{
	background-position:15px 15px !important;
}
#skin_2.selected{
	background-position:35px 15px !important;
}
#skin_3.selected{
	background-position:55px 15px !important;
}
#skin_4.selected{
	background-position:75px 15px !important;
}
#skin_5.selected{
	background-position:95px 15px !important;
}
.title
{
    cursor:pointer;}
h1{
   margin:10px;
   padding:10px 20px;
   width:60px;
   color:#ffffff;
   font-size:14px;
}
a:link {
	text-decoration: none;
	color: #333333;
}
a:visited {
	color: #333333;
	text-decoration: none;
}
a:hover {
	color: #000000;
	text-decoration: underline;
}

		</style>
		<script src="js/jquery-3.1.1.js"></script>
	</head>
	<body>
		<div class="content">
		<div class="pifu">
			<ul id="skin">
				<li id="skin_0" title="灰色" class="selected">灰色</li>
				<li id="skin_1" title="紫色" >紫色</li>
				<li id="skin_2" title="紫色" >红色</li>
				<li id="skin_3" title="紫色" >天蓝色</li>
				<li id="skin_4" title="紫色" >橙色</li>
				<li id="skin_5" title="紫色" >淡绿色</li>
			</ul>
			</div>
			<div class="big_box">
			<div id="div_side_0">
				<div id="news">
					<h1 class="title">时事新闻</h1>
				</div>
				<div id="div_side_1">
				<div id="game">
					<h1 class="title">娱乐新闻</h1>
				</div>
			</div>
		</div>
		</div>
		<script>
			var $li = $("#skin li");
			$li.click(function(){
				$("#"+this.id).addClass("selected")
				               .siblings().removeClass("selected");
				               $("#cssfile").attr("href","css/"+this.id+".css")
			})
		</script>
	</body>
</html>
